<script setup lang="ts">
  import { ref } from 'vue'
  import { mechanismList } from '@/api/auth'
  import { formatDateTime } from '@/utils/tools'
  const paging = ref()
  const dataList = ref([])
  const loadFun = (pageNo:number, pageSize:number) => {
    mechanismList({pageNo,pageSize}).then(res => {
      if(res.code == 200){
        paging.value.complete(res.data.data)
      }else{
        paging.value.complete([])
      }
    }).catch(err => {
      paging.value.complete(false)
    })
  }

  const navigatorTo = (data:any) => {
    uni.navigateTo({url:`/pages/teamPeople/teamPeople?campId=${data.id}`})
  }
</script>

<template>
  <z-paging ref="paging" class="z-paging" v-model="dataList" @query="loadFun">
    <template #top>
      <xx-title title="机构报名详情"/>
    </template>
    <view class="history-item" v-for="item in dataList" :key="item.id" @click="navigatorTo(item)">
      <view class="history-item-title">{{item.title}}</view>
      <view class="history-item-time" v-if="item.registrationStartTime && item.registrationCompletionTime">
        <image :src="`${$Prefix}/public/images/smallImage/time-icon.png`"/>
        {{ formatDateTime(new Date(item.registrationStartTime),'yyyy/MM/dd') }}~{{ formatDateTime(new Date(item.registrationCompletionTime),'yyyy/MM/dd') }}
      </view>
    </view>
  </z-paging>
</template>

<style scoped lang="scss">
  ::v-deep.z-paging-content{
    background: #F5F5F5;
  }
  .history-item{
    position: relative;
    background: #FFFFFF;
    margin: 28rpx;
    overflow: hidden;
    padding: 20rpx 15rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.01),0 4px 5px 0 rgba(0, 0, 0, 0.02),0 2px 4px -1px rgba(0, 0, 0, 0.03);
    .history-item-title{
      color: #21252E;
      font-size: 32rpx;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .history-item-time{
      display: flex;
      align-items: center;
      color: #818496;
      font-size: 28rpx;
      margin-top: 12rpx;
      image{
        width: 28rpx;
        height:28rpx;
        margin-right: 10rpx;
      }
    }
  }
</style>
